#{extends 'main.html' /}
#{set title:'Esri Map and jQuery' /}

#{set 'moreStyles'}
    <!-- Load jQuery and jQuery UI via Google AJAX Libraries API -->
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery.ui.all.css" rel="Stylesheet" />
    <style type="text/css">
        .simpleInfoWindow, .simpleInfoWindow .title {
        border-color: #5C9CFF;
        }
        .simpleInfoWindow .title{
        font-weight:bold;
        }


    </style>
#{/set}

#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/javascripts/map/layout.js'}">
</script>
    <!-- ArcGIS API for JavaScript -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact"></script>

    <script type="text/javascript">
        /*************
        * Dojo stuff
        *************/

        dojo.require("esri.map");
        dojo.addOnLoad(init);

        var map, tiledMapServiceLayer;

        function init() {
        var zoomSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([20,156,255]), 1), new dojo.Color([141,185,219,0.3]));
        esri.config.defaults.map.zoomSymbol = zoomSymbol.toJson();

        var initialExtent = new esri.geometry.Extent({"xmin":244598,"ymin":6241389,"xmax":278995,"ymax":6264320,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{ extent: initialExtent, slider: false });

        // register for some map events
        dojo.connect(map, "onLoad", function() {
        console.log("Map onLoad event");

        /*****************
        * Hook up jQuery
        *****************/
        $(document).ready(jQueryReady);
        });

        dojo.connect(map, "onLayerAdd", function() {
        console.log("Map onLayerAdd event");
        });

        dojo.connect(map, "onExtentChange", showExtent);

        // Add a layer
        tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tiledMapServiceLayer);
        map.infoWindow.resize(150,100);
        }

        function showExtent(extent) {

        var s = "";
        s = "XMin: "+ extent.xmin.toFixed(2) + "&nbsp;"
        +"YMin: " + extent.ymin.toFixed(2) + "&nbsp;"
        +"XMax: " + extent.xmax.toFixed(2) + "&nbsp;"
        +"YMax: " + extent.ymax.toFixed(2);
        dojo.byId("info").innerHTML = s;
        }

        /***************
        * jQuery stuff
        ***************/

        function jQueryReady() {

        // Create jQuery Slider
        createSlider();

        var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([92,156,255,1]), 4));

        var graphic;

        dojo.connect(map, "onClick", function(evt) {
        console.log("Map onClick event");
        // Add a graphic at the clicked location
        if (graphic) {
        graphic.setGeometry(evt.mapPoint);
        }
        else {
        graphic = new esri.Graphic(evt.mapPoint, markerSymbol);
        map.graphics.add(graphic);
        }

        var content = "Latitude = ${y} <br/> Longitude = ${x}";
        map.infoWindow.setTitle("Location:");
        map.infoWindow.setContent(esri.substitute(esri.geometry.webMercatorToGeographic(evt.mapPoint), content));
        map.infoWindow.show(evt.mapPoint);
        });

        }

        function createSlider() {
        $("#jqSlider").slider({
        min: 0,
        max: tiledMapServiceLayer.tileInfo.lods.length - 1,
        value: map.getLevel(),
        orientation: "vertical",
        range: "min",
        change: function(event, ui) {
        map.setLevel(ui.value);
        }
        });

        dojo.connect(map, "onZoomEnd", function(evt) {
        $("#jqSlider").slider("value", map.getLevel());
        });
        }

    </script>
#{/set}

<p style="font-weight: bold;">
    This sample demonstrates the use of <a href="http://jquery.com/" target="_blank">jQuery</a> library with ArcGIS API (compact). This sample uses the       <a href="http://jqueryui.com/demos/slider/" target="_blank">Slider</a> UI widget.
</p>

<div id="wrapper" style="position: relative; width: 700px; height: 500px; border:1px solid #000;">
    <!-- Map canvas -->
    <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div>

    <div id="info" class="ui-widget-header ui-corner-all" style="width: 690px; z-index: 2; position: absolute; text-align: center; padding: 5px; color: black;"></div>

    <!-- Div that will render jQuery Slider -->
    <div id="jqSlider" style="position: absolute; right: 20px; top: 40px; height: 180px; z-index: 2; font-size: 9px;"></div>
</div>

<br/>
<p>Click on the map for location info.</p>

<!--#{kostroma /}-->